<template>
  <div class="home-box hide-scroller-bar">
    <RouteTitle />


    <div class="clipping-box" ref="content">
      <div class="right-arrow" @click="rightScroll"><right-outlined /></div>
      <div class="left-arrow" @click="leftScroll">
        <left-outlined />
      </div>
      <div
        class="clipping-region hide-scroller-bar"
        ref="clipping"
        :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')' }"
      >
        <a-col v-for="(item, index) in clipList" :key="index">
          <div class="clipping-item card-bg">
            <div class="content" @click="clipClick(item)">
              <img :src="item.imageUrl" style="width: 100px; height: 100px" />
              <div>{{ item.title }}</div>
              <div class="content-sub-box" v-if="item.isBtn">
                <div class="btn1 btn-red" @click.stop="clipClick(item, 'new')">
                  + 新建
                </div>
                <div class="btn2" @click.stop="recordClick(item)">记录</div>
              </div>
              <div class="content-sub-box" v-if="item.isBtn && item.isScript">
                <div class="btn1 btn-red" @click.stop="clipClick(item, 'new')">
                  + 新建
                </div>
                <div class="btn2" @click.stop="goScriptLibrary">脚本库</div>
              </div>
            </div>
            <div class="new-badge" v-if="index == 2">
              <img
                src="../../../common/image/workShotstackImage/newBadge.png"
                style="width: 70px; height: 28px"
              />
            </div>
          </div>
        </a-col>
      </div>
    </div>
    <a-row :gutter="[24, 8]" style="padding: 0 10px; padding-right: 0">
      <a-col :span="12" class="card-bg" style="padding: 10px">
        <a-row
          justify="space-between"
          align="middle"
          style="margin-bottom: 20px"
        >
          <a-col>
            <a-space :size="20">
              <a-col class="title">数据总览</a-col>
              <a-col>
                <a-button
                  type="text"
                  shape="round"
                  :class="item.key == btnItem ? 'btn-bg' : ''"
                  v-for="item in btnList"
                  :key="item.key"
                  @click="btnClick(item.key)"
                  >{{ item.title }}</a-button
                >
              </a-col>
            </a-space>
          </a-col>
          <a-col>
            <a-row class="date-list">
              <a-col
                :span="8"
                v-for="item in dateList"
                :key="item.key"
                :class="item.key == dateKey ? 'date-btn' : ''"
                @click="dateClick(item.key)"
              >
                {{ item.title }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="data-screening-list">
          <a-col :span="24">
            <a-row>
              <a-col class="icon-bg">
                <img
                  class="img"
                  src="../../../common/image/workShotstackImage/film.png"
                  v-if="btnItem == 0"
                />
                <img
                  v-else
                  class="img"
                  src="../../../common/image/workShotstackImage/ipUser.png"
                />
              </a-col>
              <a-col class="task-num">
                <div>{{ btnItem ? "IP账号" : "剪辑任务数" }}</div>
                <div class="num">0</div>
              </a-col>
              <a-col class="task-num" style="border-right: none">
                <div>{{ btnItem ? "曝光范围(粉丝)" : "剪辑视频数" }}</div>
                <div class="num">0</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="data-screening-list">
          <a-col :span="24">
            <a-row>
              <a-col class="icon-bg" style="background: #fff5d4">
                <img
                  class="img"
                  src="../../../common/image/workShotstackImage/video.png"
                  v-if="btnItem == 0"
                />
                <img
                  v-else
                  class="img"
                  src="../../../common/image/workShotstackImage/plan.png"
                />
              </a-col>
              <a-col class="task-num">
                <div>{{ btnItem ? "发布计划" : "成片使用率" }}</div>
                <div class="num">0</div>
              </a-col>
              <a-col class="task-num" v-if="btnItem">
                <div>使用账号</div>
                <div class="num">0</div>
              </a-col>
              <a-col class="task-num" style="border: none" v-if="btnItem">
                <div>发布视频</div>
                <div class="num">0</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="data-screening-list">
          <a-col :span="24">
            <a-row>
              <a-col class="icon-bg" style="background: #ddedfe">
                <img
                  class="img"
                  src="../../../common/image/workShotstackImage/file.png"
                  v-if="btnItem == 0"
                />
                <img
                  v-else
                  class="img"
                  src="../../../common/image/workShotstackImage/playback.png"
                />
              </a-col>
              <a-col class="task-num">
                <div>{{ btnItem ? "播放量" : "素材使用量" }}</div>
                <div class="num">0</div>
              </a-col>
              <a-col class="task-num" style="border-right: none">
                <div>{{ btnItem ? "平均播放量" : "素材平均生成成片数" }}</div>
                <div class="num">0</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <div class="carousel">
          <a-carousel autoplay>
            <img
              src="../../../common/image/workShotstackImage/shotstack_index_back.jpg"
            />
            <!-- <img
              src="https://vod01.jukeyinqing.com/common/notice/ed98544d6cbe3a896720376123eccd1d.jpg"
            />
            <img
              src="https://vod01.jukeyinqing.com/common/notice/ce9156efe235be6901027e1ba26e22e2.jpg"
            /> -->
          </a-carousel>
        </div>
      </a-col>
    </a-row>
    <a-row justify="space-between" align="middle" style="margin-top: 10px">
      <a-col class="title">热门课程</a-col>
      <a-col>
        <a-button type="text" @click="goMore">查看更多></a-button>
      </a-col>
    </a-row>
    <a-row
      class="popular-courses"
      justify="space-between"
      align="middle"
      :gutter="[16, 16]"
    >
      <a-col :span="4" v-for="i in 6" :key="i" style="cursor: pointer">
        <div class="badge">入门学习</div>
        <img
          src="https://vod01.jukeyinqing.com/common/notice/bba3d826e649e9f8b2b87e3a4f5855cc.jpg"
          class="image"
          style=""
        />
        <div class="text">新手客户入门必学指南</div>
      </a-col>
    </a-row>

    <!-- 新建剪辑 -->
    <NewClip
      :visible="newClipVisible"
      :data="clipData"
      @onCancel="newClipVisible = false"
      @onSubmit="onSubmit"
    />

    <!-- 弹框登录 -->
    <ShotstackLoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";
import NewClip from "./modules/NewClip.vue";
import { useRoute, useRouter } from "vue-router";
import CreateFixed from "../components/CreateFixed/index.vue";
import utils from "../../../common/utils/utils";

export default defineComponent({
  name: "home",
  components: { RightOutlined, LeftOutlined, NewClip },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      clipList: [
        {
          title: "脚本剪辑",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_znjj_jbjj-553070f3.png",
          editModel: 4,
          type: "video",
          isBtn: true,
          isScript: true,
          text: "scriptEditing",
        },
        {
          title: "图文剪辑",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_home_twjj-fb0f7d52.png",
          editModel: 5,
          type: "image",
          text: "imageTextEditing",
        },
        {
          title: "提取视频文字",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_chuangyi_tqspwz-390770ea.png",
          isBtn: true,
          text: "extractVideoText",
        },
        {
          title: "一键成片",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_znjj_yjjj-8747856c.png",
          editModel: 2,
          type: "video",
          text: "completedFilms",
        },
        {
          title: "模板剪辑",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_znjj_ksjj-9c911928.png",
          editModel: 3,
          type: "video",
          text: "fastCutting",
        },
        {
          title: "视频智拆分",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_home_zncf-892737ab.png",
          isBtn: true,
          text: "videoIntelligentSplitting",
        },
        {
          title: "智能剪辑",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_znjj_znjj-cf7761ac.png",
          editModel: 1,
          type: "video",
          text: "intelligentEditing",
        },
        {
          title: "文字转语音",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_chuangyi_wzzyy-1a304ecc.png",
          text: "TextToSpeech",
        },
        {
          title: "AI创作",
          imageUrl:
            "https://ui.biaodianyun.com/dy-saas/admin-pc/assets/img_chuangyi_ai-ba20bc17.png",
          text: "aICreation",
        },
      ],
      clipData: {},
      scrollAmount: 0,
      btnItem: 0,
      btnList: [
        {
          title: "剪辑数据",
          key: 0,
        },
        {
          title: "矩阵剪辑",
          key: 1,
        },
      ],
      dateKey: 0,
      dateList: [
        {
          title: "昨日",
          key: 0,
        },
        {
          title: "7天",
          key: 1,
        },
        {
          title: "30天",
          key: 2,
        },
      ],

      visible: false,

      newClipVisible: false,

      currentOffset: 0,
      windowSize: 4, //显示个数：每页展示个数
      paginationFactor: 303, //移动距离：每个内层展示div宽度(包括margin)

      loginVisible: false,
    });

    //判断是否是第一张/最后一张
    const atEndOfList = computed(() => {
      return (
        state.currentOffset <=
        state.paginationFactor * -1 * (state.clipList.length - state.windowSize)
      );
    });

    const atHeadOfList = computed(() => {
      return state.currentOffset === 0;
    });

    // 横向滚动条
    const content = ref(null);
    const rightScroll = () => {
      if (!atEndOfList.value) {
        state.currentOffset -= state.paginationFactor + 200;
        return;
      }
    };

    const leftScroll = () => {
      if (!atHeadOfList.value) {
        state.currentOffset += state.paginationFactor + 200;
      }
    };

    const btnClick = (key) => {
      state.btnItem = key;
    };

    const dateClick = (key) => {
      state.dateKey = key;
    };

    const fixedIconClick = () => {
      state.visible = true;
    };

    // 剪辑
    const clipClick = (data, type) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (data.text == "extractVideoText") {
          if (type) {
            router.push({
              name: "AddVideoToText",
            });
          }

          return;
        }
        if (data.text == "videoIntelligentSplitting") {
          if (type) {
            router.push({
              name: "AddVideoIntelligentSplit",
            });
          }

          return;
        }
        if (data.text == "aICreation") {
          router.push({
            name: "AiWriting",
          });
          return;
        }
        if (data.text == "TextToSpeech") {
          router.push({
            name: "TextToSpeech",
          });
          return;
        }
        if (!data.isBtn || type) {
          state.clipData = data;
          state.newClipVisible = true;
        }
      });
    };

    // 记录
    const recordClick = (data) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (data.text == "extractVideoText") {
          router.push({
            name: "VideoToTextList",
          });
        }
        if (data.text == "videoIntelligentSplitting") {
          router.push({
            name: "VideoIntelligentSplitList",
          });
        }
      });
    };

    const onSubmit = () => {
      state.newClipVisible = false;
    };

    // 脚本库
    const goScriptLibrary = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        router.push({ name: "ScriptLibraryList" });
      });
    };

    // 记录
    const goVideoToTextList = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        router.push({ name: "VideoToTextList" });
      });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    // 热门课程-查看更多
    const goMore = () => {
      router.push({
        name: "LearningCenter",
      });
    };

    return {
      ...toRefs(state),
      rightScroll,
      leftScroll,
      content,
      btnClick,
      dateClick,
      fixedIconClick,
      clipClick,
      recordClick,
      onSubmit,
      goMore,
      goScriptLibrary,
      loginCallback,
      goVideoToTextList,
    };
  },
});
</script>

<style lang="less" scoped>
.home-box {
  width: 100%;
  height: 100%;

  .title {
    font-size: 24px;
    font-weight: 500;
  }

  .card-bg {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
  }

  .btn-bg {
    background: linear-gradient(125deg, #2878FF 18%, #ff9165 80%);
    color: #fff;
  }

  .clipping-box {
    position: relative;
    width: 100%;

    overflow: hidden;

    .clipping-region {
      width: 100%;
      height: 218px;
      margin: 20px 0;
      display: flex;
      flex-wrap: nowrap;
      transition: transform 0.5s ease-in-out;
      transform: translatex(0px);
      .clipping-item {
        width: 287px;
        height: 100%;
        margin-right: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: 0.3s ease;

        &:hover {
          border: 1px dashed #ffb1ae;
        }
        .content {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          transition: 0.3s ease;
          font-size: 18px;
          font-weight: 500;
          position: relative;
          .content-sub-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.8);
            opacity: 0;

            .btn-red {
              background: #ff8886;
            }

            .btn1 {
              width: 80px;
              height: 40px;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 10px;
              font-size: 12px;
              margin-bottom: 10px;
            }
            .btn2 {
              width: 80px;
              height: 40px;
              color: #000;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 10px;
              font-size: 12px;
              background: #fff;
              border: 1px solid #e0e0e6;
              &:hover {
                border: 1px solid #ff8886;
                color: #ff8886;
              }
            }
          }

          &:hover {
            transform: scale(1.2);
            .content-sub-box {
              opacity: 1;
            }
          }
        }

        .new-badge {
          position: absolute;
          top: 0;
          right: 16px;
        }
      }
    }
    .right-arrow {
      position: absolute;
      top: 58%;
      right: 10px;
      z-index: 11;
      transform: translateY(-84%);
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #ffffff;
      color: #2878FF;
      font-size: 20px;
      box-shadow: 0 0 18px #2878FF4d;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      transition: 0.3s ease;
    }
    .left-arrow {
      position: absolute;
      top: 58%;
      left: 10px;
      z-index: 11;
      transform: translateY(-84%);
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #ffffff;
      color: #2878FF;
      font-size: 20px;
      box-shadow: 0 0 18px #2878FF4d;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      transition: 0.3s ease;
    }

    &:hover {
      .right-arrow {
        opacity: 1;
      }
      .left-arrow {
        opacity: 1;
      }
    }
  }

  .date-list {
    width: 240px;
    height: 35px;
    background-color: #ff916514;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;
    .date-btn {
      background: #fff;
      padding: 2px 0;
      border-radius: 5px;
      color: #2878FF;
      box-shadow: 4px 4px 10px #2878FF33;
    }
  }

  .data-screening-list {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 10px;

    .icon-bg {
      width: 15%;
      height: 120px;

      background: rgb(247, 221, 244);
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 38px;
        height: 38px;
      }
    }
  }
  .task-num {
    width: 28%;
    height: 120px;
    font-size: 16px;
    color: #555555;
    padding: 20px;
    padding-left: 30px;
    border-right: 1px solid #f0efef;
    .num {
      font-size: 30px;
      color: #000;
      font-weight: 500;
    }
  }

  .carousel {
    :deep(.slick-slide) {
      background: none;
      border-radius: 16px !important;
    }
    .ss-carousel :deep(.slick-slide) {
      text-align: center;
      overflow: hidden;
    }

    .ss-carousel :deep(.slick-slide h3) {
      color: #fff;
    }
    .ss-carousel .slick-slide img {
      height: 470px;
    }
    :deep(.ss-carousel .slick-dots li button) {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      padding: 0;
      color: transparent;
      font-size: 0;
      background: #fff;
      border: 0;
      outline: none;
      cursor: pointer;
      /* opacity: 0.3; */
      transition: all 0.5s;
    }
    :deep(.ss-carousel .slick-dots li.slick-active button) {
      width: 30px;
      height: 10px;
      background: #2878FF;
      border-radius: 10px;
      opacity: 1;
    }
  }

  .popular-courses {
    margin-top: 10px;
    position: relative;
    .image {
      width: 100%;
      height: 425px;
      border-radius: 16px;
    }
    .text {
      margin-top: 5px;
      margin: 10px 0;
    }

    .badge {
      position: absolute;
      top: 0;
      right: 8px;
      width: 90px;
      height: 32px;
      background: rgb(255, 101, 98);
      // background: rgb(66, 156, 255);
      // background: linear-gradient(
      //   298deg,
      //   rgb(111, 84, 226) 0%,
      //   rgb(168, 100, 255) 100%
      // );
      color: #fff;
      border-radius: 0 16px;
      padding: 5px 20px;
      font-weight: 500;
      font-size: 12px;
    }
  }
}
</style>
